import React from 'react';
import { useNavigate } from 'react-router-dom';
import './ProductCard.css';

const ProductCard = ({ product }) => {
  const navigate = useNavigate();
  
  // 判断是否为真实图片URL还是emoji
  const isImageUrl = product.image && (product.image.startsWith('http') || product.image.startsWith('data:'));
  
  const handleViewDetails = () => {
    // 跳转到产品详情页
    navigate(`/product/${product.id}`, { 
      state: { product } 
    });
  };
  
  return (
    <div className="product-card" onClick={handleViewDetails}>
      <div className="product-image">
        {isImageUrl ? (
          <img 
            src={product.image} 
            alt={product.title}
            className="product-img"
            onError={(e) => {
              // 图片加载失败时显示默认图标
              e.target.style.display = 'none';
              e.target.nextSibling.style.display = 'flex';
            }}
          />
        ) : null}
        <div 
          className="product-icon" 
          style={{ display: isImageUrl ? 'none' : 'flex' }}
        >
          {product.image}
        </div>
      </div>
      <div className="product-content">
        <h3 className="product-title">{product.title}</h3>
      </div>
    </div>
  );
};

export default ProductCard;
